﻿<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery圆盘抽奖</title>
	<script class="jquery library" src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
</head>

<body>
	<div id="lottery" style="position: absolute; left: 459px; top: 160px">
		<img id="imgs" src="images/disc-rotate.gif" viewbox="0 0 352 30"
			style="position: absolute; left: 47px; top: 47px; width: 352px; height: 352px;" id="imgs" class="image" />
		<div class="arrow">
		</div>
		<div class="lot-btn first">
			<span></span>
		</div>
	</div>

</body>

</html>
<style>
	#lottery {
		background: url("images/disc-bg.gif?v=79804") no-repeat scroll 0 0 transparent;
		height: 450px;
		left: 50px;
		position: absolute;
		width: 450px;
	}

	#lottery .arrow {
		background: url("images/arrow.png?v=1bde2") no-repeat scroll 0 0 transparent;
		height: 191px;
		left: 207px;
		position: absolute;
		top: 91px;
		width: 32px;
	}

	#lottery .lot-btn {
		height: 92px;
		left: 177px;
		overflow: hidden;
		position: absolute;
		top: 181px;
		width: 91px;
	}

	#lottery .lot-btn span {
		cursor: pointer;
		display: block;
		height: 92px;
		position: relative;
		width: 91px;
	}

	#lottery .first span {
		background: url("images/buttons_01.png?v=8bc8e") no-repeat scroll 0 0 transparent;
	}
</style>
<script>
	$(function () {
		$(".lot-btn").click(function () {
			//服务器返回中奖的奖品，根据奖品获取所在角度。
			var var0 = [[0,45],[45,90],[90,135],[135,180],[180,225],[225,270],[270,315],[315,360]]
			var var01 =  Math.floor(Math.random()*8)
			var var02 = (var0[var01][0]+(var0[var01][1]-var0[var01][0])/2)
			var var1 = Math.floor(Math.random()*10)+1
			console.log("var1="+var1)
			var var2 = 360*var1+var02
			console.log("var2="+var2)
			$("#imgs").rotate({
				animateTo: var2,
				duration: 3000,
				callback: function() {
					var var3 = $(this).getRotateAngle()
					var var4 = var3 % 360;
					alert("恭喜您抽中奖品："+var4)
					$("#imgs").rotate(0)
				}
			})
			
		})
	});
</script>